<template>
  <div class="home" v-if="type==='0'||type===0||type==1">
    <div class="box1">
      <van-tabs v-model="active" @click="tabsClick">
        <van-tab title="待付款"></van-tab>
        <van-tab title="已付款"></van-tab>
      </van-tabs>
    </div>

    <div class="box2">
        <van-list
        v-model="params.loading"
        :finished="finished"
        finished-text="没有更多了"
         @load="onLoad"
      >
       <div class="list"  v-for="(item,index) in data" :key="index">
            <div class="order">订单号:{{item.ordersn}}</div>
             
              
             <div class="info1">
                <div class="infoParam">
                   
                    <div  v-if="item.integra==1" >
                        积分抵扣：<span style="color:red">{{item.dk}}</span>分
                    </div>
                    <div  v-if="item.type==1">
                    类型：购买服装费用
                    </div>
                    <div  v-if="item.type==2">
                    类型：抵扣服装优惠券
                    </div>
                </div>
                <div class="name">
                   
                </div>
                <div class="price">
                    <div>金额: {{item.money}}</div>
                    <div>实际支付: {{item.price}}</div>
                </div>
            </div>
          
             
            <div class="info2">
                    <div class="time" v-if="active===0">
                        创建时间：{{item.createtime}}
                    </div>
                     <div class="time" v-if="active===1">
                        支付时间：{{item.suctime}}
                    </div>
                    <div class="but" v-if="active===0">
                        <van-button    size="mini" type="info"  @click="cancelPay(item.id)">取消</van-button> 
                        <van-button    size="mini" type="info"  @click="sub(item.id)">支付</van-button> 
                    </div>
            </div>
        </div>
      </van-list>
       
    </div>
  </div>
</template>
<script>
import {hideWxMenu } from '@/assets/js/tools'
import { mapState, mapActions } from "vuex";
import WeChat from '@/assets/js/wx/index'
import VueBarcode from "vue-barcode";
let t;
export default {
  name: "home",
  data() {
    return {
        data:[],
      active: 0,
      params: {
        page: 0,
        loading:false,
        limit:10,
      },
      finished: false,
       count: 0,
       type:'',
    };
  },
  mounted() {
    t = this;
   
     hideWxMenu()
    t.type=t.$route.query.type
    if (!t.usersDetail.id) {
      t.GetUsersDetail({ openid:localStorage.getItem('openid') });
    }
 
  },
  computed: {
    ...mapState(["usersDetail"]),
  },
  methods: {
    ...mapActions(["GetUsersDetail"]),
    onLoad(){
        t.params.page++;
        this.getList();
    },
    cancelPay(id){
        let d={
            openid:localStorage.getItem('openid'),
            id:id
        } 
        t.$dialog.confirm({
          
          message: '确认要取消支付吗？',
        })
          .then(() => {
             t["$API"]['userUserOrder_cancel'](d).then((res) => {
                  if(res.code==200){
                           t.$toast('取消成功')

                             setTimeout((t) => {
                              
                                    t.params.page=1;
                                      t.getList();
                              
                          }, 500,t);
                  }
            
            })
          })
          .catch(() => {
            // on cancel
          })

         
      
    },
    sub(id){
        let d={
            openid:localStorage.getItem('openid'),
            id:id
        }
         t["$API"]['userUserOrderpay'](d).then((res) => {
                  if(res.code==200){
      
      let data=JSON.parse(res.data);

            console.log("data",data)

        WeChat._initWX().then(() => {
            
            	wx.chooseWXPay({
                timestamp:data.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                nonceStr: data.nonceStr, // 支付签名随机串，不长于 32 位
                package: data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
                signType: data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                paySign: data.paySign, // 支付签名
                success: function (res) {

                   
                     

                         t.$toast('支付成功')
                          setTimeout((t) => {
                              
                                    t.params.page=1;
                                      t.getList();
                              
                          }, 500,t);
                  
                }
              })
        })
    
          }
         })
    },
    tabsClick(name, title) {
      t.data=[];
    // this.finished=false;
      t.params.page=1;
     t.getList() 
    },
    getList() {
        let d={
            page:t.params.page,
            limit:t.params.limit,
            openid:localStorage.getItem('openid'),
            status:t.active,
        }
        let url='';
        if(t.type==='0'||t.type===0){
            url='userUserPayOrder'
        }else if(t.type==1){
             url='userWriteHxOrder'
        }
      t["$API"][url](d).then((res) => {
        this.params.loading = false;
        if (res.code == 200) {
          t.count = res.data.count;
        
          if (t.params.page == 1) {
            t.data = [];
            t.data = res.data.data;
          } else {
            t.data = t.data.concat(res.data.data);
          }

          if (t.data.length >= t.count) {
            this.finished = true;
          }
        } else {
          t.data = [];
          this.finished = true;
        }
      });
    },
  },
};
</script>
<style scoped lang="less">
.home {
  height: 100vh;
  background: #f1f1f1;
}

.box1 {
  background: white;
}
.box2{
    .list{
            border-radius: .3rem;
        margin: .5rem;
        background: white;
        border:1px solid #ececec;
        .order{
            padding: .5rem;
            font-size: .9rem;
            border-bottom: 1px solid #ececec;
        }
        .info1{
                    padding: .5rem;
                    display: flex;
                    align-items: center;
                    >.head{
                        >img{
                         width: 3rem;
                        height: 3rem;
                        border-radius: 50%;
                    }
                    }
                >.infoParam{
                    
                        font-size: .7rem;
                        line-height: 1.5rem;
                            color: #00b894;
                   
                }
                >.name{
                    padding-left: .5rem;
                }
                >.price{
                     font-size: .7rem;
                    flex: 1;
                    line-height: 1.5rem;
                    text-align: right;
                    color: red;
                }
        }  
        .info2{
            display: flex;
            padding:.5rem;
            align-items: center;
            border-top: 1px solid #ececec;
            .time{
                 text-align: left;
                font-size: .9rem;
                color: #5e5e5e;
                   flex:2;
            }
            .but{
                text-align: right;
                button{
                            background: #376157;
                                background-image: linear-gradient(
                            45deg, #376157, #00b894);
                            padding:0 1rem;
                }
            }
           
        } 
       
    }
}
</style>
 